<template>
	<view class="content">
		<!-- //头部-->
		<view class="head">
			<u-icon @click="navGo()" class="icons" name="arrow-left" color="#fff" size="40"></u-icon>
			<view class="head_img">
				<image src="/static/home/1.jpg" mode=""></image>
			</view>
			<view class="grade">
				<view class="grade_left">4.9</view>
				<view class="grade_right">
					<view>
						<text class="icon iconfont">&#xe621;</text>
						<text class="icon iconfont">&#xe621;</text>
						<text class="icon iconfont">&#xe621;</text>
						<text class="icon iconfont">&#xe621;</text>
						<text class="icon iconfont">&#xe621;</text>
					</view>
					<view class="grade_bottom">
						<text class="icon iconfont">&#xe625;198</text>
						<text class="icon iconfont">&#xe62f;52</text>
					</view>

				</view>
			</view>
			<!-- 收藏 -->
			<view class="selected">
				<text class="icon iconfont">&#xe619;</text>
			</view>
			<view class="share">
				<text class="icon iconfont">&#xe650;</text>
			</view>
		</view>
		<!-- 卡片部分 -->
		<view class="card">
			<view class="card_cont" @click="goIntroduce">
				<view class="card_img">
					<image src="/static/logo.png" mode=""></image>
				</view>
				<view class="card_infor">
					<view>
						<text class="name">JAVEN 美发师</text>
						<text class="type public">高级</text>
						<text class="icon iconfont">&#xe606;</text>
						<text class="gz">+关注</text>
						<text class="clear"></text>
					</view>
					<view class="card_center">
						<text class="public">店长｜从业12年</text>
						<text class="public fs">粉丝数 123.2万</text>
						<!-- <text class="gz">+编辑</text> -->
						<text class="clear"></text>
					</view>
					<view class="card_footer">
						<text class="icon iconfont">v</text><text class="text">预约服务</text>
						<text class="icon iconfont">v</text><text class="text">职业认证</text>
						<text class="icon iconfont">v</text><text class="text">独立工作</text>
						<text class="icon iconfont">v</text><text class="text">上门服务</text>
						<text class="xiangqing">详情</text>
						<u-icon name="arrow-right" size="15"></u-icon>
					</view>
				</view>
			</view>
			<view class="bg">
				<view class="bg_left">
					<view>
						<text class="free">自由者</text>
						<text class="cd">成都NICE美发造型沙龙</text>
					</view>
					<view>
						<text class="jl">武侯区天府三家B7栋402 距离我2.7km</text>
					</view>
				</view>
				<view class="bg_right">地图</view>
			</view>
		</view>
		<!-- 优惠 -->
		<view class="discount">
			<view class="dis_top" @click="member = true">
				<text class="dis_y">优惠</text>
				<text class="dis_h">会员</text>
				<text class="dis_p">平台会员享受此实体店，铂金VIP会员权益;</text>
				<u-icon name="arrow-right" size="22" color="#868686"></u-icon>
			</view>
			<view class="dis_bot" @click="show = true">
				<text class="man">满减</text>
				<text class="man_fav">满500减500</text>
				<text class="man_fav">满100减5</text>
			</view>

		</view>
		<!-- //选项卡 -->
		<view class="tbs">
			<van-tabs v-model='avtive'>
				<van-tab title="设计师" v-model='active'>
					<tbsServe></tbsServe>
				</van-tab>
				<van-tab title="服务">
					<service></service>
				</van-tab>
				<van-tab title="作品">
					<works></works>
				</van-tab>
				<van-tab title="点评">
					<comment></comment>
				</van-tab>
			</van-tabs>
		</view>
		<!-- 优惠卷 -->
		<u-popup v-model="show" mode="bottom" closeable="false" height="765">
			<coupon></coupon>			
		</u-popup>
		<!-- 会员 -->
		<u-popup v-model="member" mode="bottom" closeable="false" height="765">
			<member></member>
		</u-popup>
	</view>
</template>

<script>
	import {
		DesignerService,
		StoreInformation
	} from "@/api/details.js"
	import tbsServe from './components/tbsServe.vue'
	import service from './components/service.vue'
	import works from './components/works.vue'
	import comment from './components/comment.vue'
	import coupon from './components/coupon.vue'
	import  member  from './components/member.vue'
	export default {
		components: {
			tbsServe,
			service,
			works,
			comment,
			coupon,
			member
		},
		data() {
			return {
				avtive: 1,
				userId: '',
				shopId: '',
				show: false,
				member:false
			}
		},
		async onLoad(option) {
			let that = this

			function b() {
				that.userId = option.userId

			}
			await b()
			this.getData(this.userId);
			this.StoreInfo()
		},
		methods: {
			change(index) {
				this.current = index;
			},
			getData(userId) {
				let data = {
					userId: this.userId,
					serviceCategory: '美发',
					serviceSubdivide: '洗剪吹'
				};
				DesignerService(data).then(res => {
					console.log(res[1].data)
				})
			},
			StoreInfo() {
				let data = {
					shopId: this.shopId
				};
				StoreInformation(data).then(res => {
					console.log('获取店铺信息', res[1].data)
				})
			},
			navGo() {
				uni.navigateBack({
					delta: 1
				})
			},
			//去往设计师信息
			goIntroduce() {
				uni.navigateTo({
					url: '/pagesA/esignerd/esignerd'
				})
			}
		}
	}
</script>

<style scoped lang="less">


	.tabs {
		padding: 0 120rpx 0 0;
	}

	.van-tabs__scroll--card {
		width: 60%;
		/* margin: 0 16px; */
		/* margin: 0 var(--padding-md, 16px); */
	}

	.content {

		.head {
			width: 100%;
			position: relative;

			.icons {
				position: absolute;
				top: 15%;
				left: 5%;
			}

			.head_img {
				width: 100%;
				height: 460rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.grade {
				position: absolute;
				width: 247rpx;
				// height: 64rpx;
				background: #363636;
				opacity: 0.7;
				border-radius: 0px 30px 30px 0px;
				bottom: 13rpx;
				left: 0;
				display: flex;

				.grade_left {
					// display: inline-block;
					font-size: 48rpx;
					font-family: PingFang;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 64rpx;
					text-align: center;
					margin-left: 13rpx;
					// margin: 13rpx  25rpx;
				}

				.grade_right {
					width: 100rpx;
					// height: 64rpx;
					// border: 1rpx solid red;
					margin-left: 10rpx;

					// transform: translateY(-10rpx);
					// display: inline-block;
					.iconfont {
						color: #F2CB51;
						font-size: 22rpx;

					}
				}

				.grade_bottom {
					margin-bottom: 10rpx;
					font-size: 18rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFEFE;

					text {
						margin-right: 10rpx;
					}

					.iconfont {
						color: white;
						font-size: 22rpx;

					}
				}
			}

			.selected {
				width: 50rpx;
				height: 50rpx;
				background: #282828;
				opacity: 0.5;
				border-radius: 50%;
				position: absolute;
				right: 90rpx;
				bottom: 13rpx;
				text-align: center;

			}

			.iconfont {
				color: white;
				font-size: 40rpx;
			}

			.share {
				width: 50rpx;
				height: 50rpx;
				background: #282828;
				opacity: 0.5;
				border-radius: 50%;
				position: absolute;
				right: 24rpx;
				bottom: 13rpx;
				text-align: center;
			}
		}

		.card {
			width: 100%;
			height: 243rpx;
			// border-bottom: 5rpx solid #F7F7F7;
			background-color: #FFFFFF;
			// padding-left: 25rpx;
			// border: 1px solid red;

			.card_cont {
				padding: 25rpx 25rpx;
				display: flex;

				.card_img {
					width: 100rpx;
					height: 100rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.card_infor {
					margin-left: 10rpx;
					width: 100%;

					.public {
						color: #282828;
						font-size: 20rpx;
						font-family: PingFang;
						font-weight: 500;
					}

					.iconfont {
						color: #22435B;
						font-size: 21rpx;
					}

					.name {

						font-size: 30rpx;
						font-family: PingFang;
						font-weight: bold;
						color: #333333;
					}

					.type {
						margin-right: 12rpx;
						margin-left: 45rpx;
					}

					.gz {
						width: 85rpx;
						height: 35rpx;
						border: 1rpx solid #1EBBBD;
						border-radius: 16rpx;
						text-align: center;
						font-size: 22rpx;
						font-family: STHeitiSC;
						font-weight: 500;
						color: #00C6C2;
						float: right;
					}

					.clear {
						display: inline-block;
						clear: both;
					}

					.fs {
						margin-left: 100rpx;
					}
				}

				.card_footer {
					line-height: 15rpx;

					.iconfont {
						display: inline-block;
						text-align: center;
						line-height: 15rpx;
						width: 15rpx;
						height: 15rpx;
						// font-size: 15rpx;
						border-radius: 50%;
						border: 1rpx solid #1FBCBE;
						color: #1FBCBE;
						// font-size: 32rpx;
					}

					.text {
						margin-right: 10rpx;
						font-size: 20rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #606060 !important;
					}

					.xiangqing {
						margin-left: 110rpx;
						margin-right: 10rpx;
						display: inline-block;

						color: #606060;

						font-size: 20rpx;
						font-family: PingFang;
						font-weight: 500;
					}

					.clear {
						display: inline-block;
						clear: both;
					}
				}
			}

			.bg {
				width: 700rpx;
				height: 96rpx;
				// border: 1px solid red;
				margin-left: 25rpx;
				// background: url('../../static/design/bg.png') no-repeat;
				background-size: 100%;
				display: flex;

				.bg_left {
					width: 425rpx;
					padding-left: 9rpx;

					.free {
						width: 70rpx;
						height: 25rpx;
						line-height: 25rpx;
						text-align: center;
						background: #1EBBBD;
						border-radius: 2rpx;
						font-size: 16rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #FFFEFE;
						margin-right: 18rpx;
					}

					.cd {


						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #343434;
					}

					.jl {

						font-size: 16rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #343434;
						margin-left: 65rpx;
					}
				}

				.bg_right {
					width: 275rpx;
					height: 100%;
					display: flex;
					flex-direction: row-reverse;
					align-items: center;
					padding-right: 19rpx;

					font-size: 20rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #515151;
				}
			}
		}

		// 优惠
		.discount {
			width: 100%;
			height: 120rpx;
			border-bottom: 8rpx solid #F7F7F7;
			background-color: #fff;
			position: relative;

			.dis_top {
				margin-top: 19rpx;
				margin-left: 25rpx;

				.dis_y {

					font-size: 32rpx;
					font-family: PingFang;
					font-weight: bold;
					color: #343434;
					margin-right: 31rpx;
				}

				.dis_h {
					display: inline-block;
					width: 46rpx;
					height: 30rpx;
					background: #E6FFFF;
					border-radius: 4rpx;
					line-height: 30rpx;
					text-align: center;
					font-size: 16rpx;
					font-family: PingFang;
					font-weight: bold;
					color: #00C6C2;
					margin-right: 22rpx;
				}

				.dis_p {

					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #000000;
				}

				u-icon {
					position: absolute;
					right: 23rpx;
				}
			}

			.dis_bot {
				text {
					display: inline-block;
				}

				.man {
					text-align: center;
					width: 46rpx;
					height: 30rpx;
					line-height: 30rpx;
					background: #E6FFFF;
					border-radius: 4px;
					margin-left: 115rpx;
					font-size: 16rpx;
					font-family: PingFang;
					font-weight: bold;
					color: #00C6C2;
					margin-right: 23rpx;
				}

				.man_fav {
					width: 117rpx;
					height: 30rpx;
					border: 1rpx solid #00C6C2;
					line-height: 30rpx;
					text-align: center;
					font-size: 20rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #00C6C2;
					margin-right: 19rpx;
				}

			}
		}

		// 选项卡
		.tbs {

			/deep/.van-tabs__nav {
				border-bottom: 1px solid #EEEEEE;
			}

			/deep/.van-tabs__wrap {
				margin-bottom: 0 !important;
				// height: 0;
			}


		}
	}
</style>
